import React, { PureComponent } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import {
  Card,
  Row,
  Col,
  Radio,
  Input,
  Button,
  Modal,
  Table,
  Divider
} from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import styles from './List.less';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { Search } = Input;

@connect(({ ad, loading }) => ({
  ad,
  loading: loading.models.ad,
}))

class List extends PureComponent {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'ad/fetch',
      payload: {
        page: 1,
        pageSize: 8
      }
    });
  }

  render() {
    const {
      ad: { list },
      loading
    } = this.props;
    // 表头
    const columns = [{
      title: '描述',
      dataIndex: 'desc',
      key: 'desc',
    }, {
      title: '任务总数',
      dataIndex: 'totalNum',
      key: 'totalNum',
    }, {
      title: '已接总数',
      dataIndex: 'receiveNum',
      key: 'receiveNum',
    }, {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: state => (
        <div>
          <Button onClick={(e) => {handleButton(e)}} size="small" type="primary">通过</Button>
          <Divider type="vertical" />
          <Button size="small">不通过</Button>
        </div>
      ),
    }]

    const handleButton = (e) => {
      e.stopPropagation()
      Modal.confirm({
        title: '提示',
        content: '确定通过？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          alert(1)
        },
      });
    };

    const Info = ({ title, value, bordered }) => (
      <div className={styles.headerInfo}>
        <span>{title}</span>
        <p>{value}</p>
        {bordered && <em />}
      </div>
    );

    const handleRowClick = (record, rowkey) => {
      router.push({
        pathname: '/ad/detail',
        query: {
          id: record._id,
        }
      })
      return;
    }

    const extraContent = (
      <div className={styles.extraContent}>
        <RadioGroup defaultValue="all">
          <RadioButton value="all">待审核</RadioButton>
          <RadioButton value="progress">全部</RadioButton>
        </RadioGroup>
        <Search className={styles.extraContentSearch} placeholder="请输入" onSearch={() => ({})} />
      </div>
    );

    return (
      <PageHeaderWrapper>
        <div className={styles.standardList}>
          <Card bordered={false}>
            <Row>
              <Col sm={12} xs={24}>
                <Info title="待审核" value="8个" bordered />
              </Col>
              <Col sm={12} xs={24}>
                <Info title="今日新增" value="20个" />
              </Col>
            </Row>
          </Card>

          <Card
            className={styles.listCard}
            loading={loading}
            bordered={false}
            title="广告列表"
            style={{ marginTop: 24 }}
            bodyStyle={{ padding: '0 32px 40px 32px' }}
            extra={extraContent}
          >
            <Table
              onRow={(record, rowkey) => {
                return {
                  onClick: () => {
                    handleRowClick(record, rowkey)
                  }
                };
              }}
              // onRow={(record, rowkey) => {
              //   return {
              //     onClick: this.handleRowClick.bind(this, record, rowkey)
              //   };
              // }}
              bordered dataSource={list} columns={columns} />
          </Card>
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default List;
